import * as echarts from 'echarts';
import {getBarChartInfo} from "@/api/todo";
import {Notify} from "vant";

let barChartInfo = [];

export const getBarChart = (chartDom) => {
    let myChart = echarts.init(chartDom);
    let option;

    // 发送获取信息请求
    console.log('获取信息')
    getBarChartInfo().then(res => {
        if (res.code === 20000) {
            barChartInfo.push(res.data.finishedCount);
            barChartInfo.push(res.data.unFinishedCount);
            barChartInfo.push(res.data.expiredCount);
            console.log('获取完成')
        } else {
            Notify({ type: 'warning', message: res.description});
        }
    }).catch(res => {
        console.log(res.message)
    });

    // setTimeout保证异步请求结束后barChartInfo数据加载完成才能开始加载图形，否则图形没有数据
    setTimeout(() => {
        console.log('开始加载图形')
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['已完成', '未完成', '已超时'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'count',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                let colorList = [ '#59b48a', '#e36666','#c7be41'];
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    barWidth: '60%',
                    data: barChartInfo
                }
            ]
        };

        option && myChart.setOption(option);
        window.onresize = () => {
            //自适应大小, 不用的话不会自适应大小。
            myChart.resize();
        };
    }, 300);
    barChartInfo = [] // 图形加载完成后重置列表，否则数据有改变后会在原有基础上在列表新增数据
}

